<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>熙熙的自动拼图机</title>
    <style type="text/css">
        #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
        #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
    </style>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        var length = 30;
        var canvas, canvasShapes;
        var ctx, ctxShapes;
        var posShapes;
        const PLATE_HEIGHT = 5;
        const SHAPES_PER_LINE = 5;
        const SHAPES_COUNT = 12;
        var selectedShapes = [];
        var plateWidth = 5;
        var downCount = 30;
        var prompt = "";
        function shapeClicked(e) {

        }
        function drawPlate(context, x, y, width) {
            for (i = 0; i < width; ++i) {
                for (j = 0; j < PLATE_HEIGHT; ++j) {
                    drawSquare(context, i, j, "#FFFFFF");
                }
            }
        }
        function drawShapesOnPlate(context, shape, x, y, firstX, firstY) {

            var i, j;
            for (i = 0; i < shape.width; i++) {
                for (j = 0; j < shape.height; j++) {
                    if (shape.data[j][i] == 1) {
                        drawSquare(context, x - firstX + i, y - firstY + j, shape.color);
                    }
                }
            }
        }

        function drawSquare(context, x, y, color) {
            context.fillStyle = color;
            context.fillRect(x * length, y * length, length, length);
            context.strokeRect(x * length, y * length, length, length);
        }
        function drawShape(context, x, y, width, height, data, color) {
            var i, j;
            for (i = 0; i < width; i++) {
                for (j = 0; j < height; j++) {
                    if (data[j][i] == 1) {
                        context.fillStyle = color;
                        context.fillRect(x + i * length, y + j * length, length, length);
                        context.strokeRect(x + i * length, y + j * length, length, length);
                    }

                }
            }
        }
        function inArray(needle, haystack) {
            for (o in haystack) {
                if (needle == haystack[o]) {
                    return o;
                }
            }
            return -1;
        }
        function plateChange(context, width) {
            plateWidth = width;
            context.clearRect(0, 0, 800, 800)
            drawPlate(context, 0, 0, width, 5);
        }
        function drawShapes(allShapes, selectedShapes) {
            canvasShapes = document.getElementById('canvasShapes');
            ctxShapes = canvasShapes.getContext('2d');
            ctxShapes.strokeStyle = "black";
            ctxShapes.clearRect(0, 0, 800, 800);
            index = 0;
            for (id in allShapes) {
                var shape = allShapes[id];
                x = (index % SHAPES_PER_LINE) * 5 * length;
                y = parseInt(index / SHAPES_PER_LINE) * 5 * length;
                if (inArray(id, selectedShapes) != -1) {
                        ctxShapes.fillStyle = "#66FF66";
                        ctxShapes.fillRect(x, y, 5 * length, 5 * length);
                }
                ctxShapes.strokeRect(x, y, 5 * length, 5 * length, "#00FF00");
                drawShape(ctxShapes, x, y, shape.width, shape.height, shape.data, shape.color);
                index++;
            }
        }
        function getAllShapes() {
            $.get("/index.php/api/get-all-shapes",function(data, status){
                        if (status) {
                            allShapes = data.data;
                            if (allShapes != false) {
                                drawShapes(allShapes, selectedShapes);
                                canvasShapes.onmouseup = function(e){
                                    var bbox =canvasShapes.getBoundingClientRect();
                                    realX = e.pageX- bbox.left *(canvas.width / bbox.width),
                                    realY = e.pageY - bbox.top  * (canvas.height / bbox.height)

                                    idClicked = parseInt(realY / (5 * length)) * SHAPES_PER_LINE
                                            + parseInt(realX / (5 * length));

                                    if (idClicked < SHAPES_COUNT) {
                                        pos = inArray(idClicked, selectedShapes);
                                        if (pos == -1) {
                                            selectedShapes.push(idClicked);
                                        } else {
                                            selectedShapes.splice(pos, 1);
                                        }
                                        drawShapes(allShapes, selectedShapes);
                                    }

                                }
                            }
                            return;
                        } else {
                            return false;
                        }
                    }
            );
        }
        function init() {
            canvas = document.getElementById('myCanvas');
            ctx = canvas.getContext('2d');
            ctx.strokeStyle = "black";
            drawPlate(ctx, 0, 0, plateWidth);
            var allShapes = getAllShapes();
        };
        function go() {
            if (selectedShapes.length < 3) {
                alert('请至少先选择3个形状。');
            } else {
                document.getElementById("go").disabled=true;

                $.ajax({
                    url: "/index.php/api/go?width=" +plateWidth + "&selectShapes=" + selectedShapes,
                    type: "GET",
                    success:
                        function(data, status)
                        {
                            document.getElementById("loading").style.display="none";
                            if (status) {
                                prompt = data.message;
                                var allNodes = data.data;
                                drawPlate(ctx, 0, 0, plateWidth);
                                for (id in allNodes) {
                                    var node = allNodes[id];
                                    drawShapesOnPlate(ctx, node.shape, node.x, node.y, node.firstX, node.firstY);

                                }
                            } else {
                                prompt  = "真想不出来。。。";
                            }
                            document.getElementById("go").disabled=false;
                            document.getElementById("prompt").innerHTML = prompt;
                        },
                    beforeSend:
                            function (){
                                document.getElementById("loading").style.display="block";
                                document.getElementById("prompt").innerHTML = prompt;
                            },
                    failed:
                            function (){
                                document.getElementById("loading").style.display="none";
                                prompt = '实在是想不出来，好像哪里出错了。。。';
                                document.getElementById("prompt").innerHTML = prompt;
                            },
                    error:
                            function (){
                                document.getElementById("loading").style.display="none";
                                prompt = '实在是想不出来，好像哪里出错了。。。';
                                document.getElementById("prompt").innerHTML = prompt;
                            }
                });

            }
        }

    </script>
</head>
<body onload="init()">
<div id="container" style="width:1280px" style="margin: auto">

    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">熙熙的自动拼图机</h1></div>

    <div id="nav" style="background-color:#FFD700;height:400px;width:400px;float:left;">
        请选择底盘的大小：
        <input type="range" name="points" min="3" max="12" value="5" onchange="plateChange(ctx, this.value)"/>
        <input type="button" id="go" value="GO!!" onclick="go()" />
        <div id="prompt"></div>
        <div id="loading" style="display: none"> <img src="/loading.gif"></div>
        <canvas id="myCanvas" width="800" height="800"></canvas>

    </div>
    <div id="content" style="background-color:#EEEEEE;height:600px;width:880px;float:right;">
        请选择需要的形状:
        <div id="shapes" style="background-color:#EEEEEE;height:500px;width:500px;">
            <canvas id="canvasShapes" width="800" height="800"></canvas>
        </div>
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        版权 © 王肇刚</div>

</div>



</body>
</html>